import React, { Component } from 'react';
import { array } from 'prop-types';
import FlipView from 'react-uwp/FlipView';
import Image from 'react-uwp/Image';
import Search from '../common/Search';
class Banner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: (window.innerWidth * 640) / 1920
    };
  }
  static propTypes = {
    bannerList: array.isRequired
  };

  componentDidMount() {
    window.addEventListener('resize', this.handleHeight);
  }
  handleHeight = () => {
    if (window.innerWidth < 1200) return;
    this.setState({
      height: (window.innerWidth * 560) / 1920
    });
  };
  render() {
    const { height } = this.state;
    const flipViewStyle = {
      //   width: window.innerWidth,
      height: height
    };
    const { bannerList } = this.props;
    return (
      <div style={{ position: 'relative', flipViewStyle }}>
        {bannerList && bannerList.length > 0 ? (
          <FlipView navigationIconSize={48}>
            {bannerList.slice(0, 3).map((item, index) => (
              <Image
                useLazyLoad
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover'
                }}
                src={item.url}
                key={`${index}`}
              />
            ))}
          </FlipView>
        ) : (
          <Image src={require('../../assets/img/common/bg.png')} />
        )}
        <div
          style={{ position: 'absolute', width: '100%', bottom: '4rem' }}
          className="dfrc"
        >
          <div
            style={{
              height: '3.2rem',
              width: '25.2rem',
              padding: '0.6rem',
              background: 'rgba(0,0,0,0.4)'
            }}
          >
            <Search />
          </div>
        </div>
      </div>
    );
  }
}
export default Banner;
